<template>
  <div class="image-segmentation">
    <!-- 页面头部 -->
    <div class="segmentation-header">
      <div class="container">
        <div class="header-content">
          <div class="header-info">
            <h1 class="page-title">
              <el-icon class="title-icon"><Picture /></el-icon>
              医学影像分割模块
            </h1>
            <p class="page-subtitle">智能医学影像分割处理，助力精准诊断与治疗</p>
          </div>
          <div class="module-status">
            <div class="status-indicator">
              <span class="status-dot"></span>
              <span class="status-text">分割引擎运行正常</span>
            </div>
            <div class="model-info">
              <span class="model-badge">AI驱动</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能导航区域 -->
    <div class="function-navigation">
      <div class="container">
        <div class="nav-grid">
          <div 
            v-for="(func, index) in segmentationFunctions" 
            :key="index"
            class="function-card"
            @click="selectFunction(func)"
            :class="{ 'active': selectedFunction?.id === func.id }"
          >
            <div class="function-icon" :style="{ backgroundColor: func.color }">
              <el-icon><component :is="func.icon" /></el-icon>
            </div>
            <div class="function-info">
              <h3 class="function-name">{{ func.name }}</h3>
              <p class="function-description">{{ func.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要工作区域 -->
    <div class="main-workspace">
      <div class="container">
        <div class="workspace-content">
          <!-- 左侧：图像上传区域 -->
          <div class="upload-section">
            <div class="upload-card">
              <div class="upload-header">
                <h3>医学影像上传</h3>
                <p>支持DICOM、PNG、JPG等格式</p>
              </div>
              
              <div class="upload-area" v-if="!uploadedImage">
                <el-upload
                  class="image-uploader"
                  :show-file-list="false"
                  :before-upload="handleBeforeUpload"
                  action="#"
                  :auto-upload="false"
                  @change="handleImageUpload"
                >
                  <div class="upload-placeholder">
                    <el-icon class="upload-icon"><Plus /></el-icon>
                    <div class="upload-text">
                      <p>点击或拖拽上传医学影像</p>
                      <p class="upload-tip">建议尺寸：512x512像素</p>
                    </div>
                  </div>
                </el-upload>
              </div>
              
              <div class="uploaded-image" v-else>
                <img :src="uploadedImage" alt="上传的医学影像" />
                <div class="image-actions">
                  <el-button @click="clearImage" size="small">重新上传</el-button>
                  <el-button type="primary" @click="startSegmentation" size="small" :loading="processing">
                    开始分割
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧：分割结果展示 -->
          <div class="result-section">
            <div class="result-card">
              <div class="result-header">
                <h3>分割结果</h3>
                <div class="result-tools" v-if="segmentationResult">
                  <el-button size="small" @click="downloadResult">
                    <el-icon><Download /></el-icon>
                    下载结果
                  </el-button>
                  <el-button size="small" @click="shareResult">
                    <el-icon><Share /></el-icon>
                    分享
                  </el-button>
                </div>
              </div>
              
              <div class="result-content">
                <div v-if="!segmentationResult && !processing" class="empty-result">
                  <el-icon class="empty-icon"><Picture /></el-icon>
                  <p>暂无分割结果</p>
                  <p class="empty-tip">请先上传医学影像并选择分割功能</p>
                </div>
                
                <div v-else-if="processing" class="processing-state">
                  <el-icon class="processing-icon rotating"><Loading /></el-icon>
                  <p>正在进行影像分割...</p>
                  <div class="progress-info">
                    <el-progress :percentage="processingProgress" />
                    <p class="progress-text">{{ processingStatus }}</p>
                  </div>
                </div>
                
                <div v-else class="result-display">
                  <img :src="segmentationResult" alt="分割结果" />
                  <div class="result-metadata">
                    <div class="metadata-item">
                      <span class="label">分割类型:</span>
                      <span class="value">{{ selectedFunction?.name }}</span>
                    </div>
                    <div class="metadata-item">
                      <span class="label">置信度:</span>
                      <span class="value">{{ confidenceScore }}%</span>
                    </div>
                    <div class="metadata-item">
                      <span class="label">处理时间:</span>
                      <span class="value">{{ processingTime }}s</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 技术说明 -->
    <div class="technology-section">
      <div class="container">
        <h2 class="section-title">技术特性</h2>
        <div class="features-grid">
          <div v-for="(feature, index) in techFeatures" :key="index" class="feature-item">
            <div class="feature-icon" :style="{ backgroundColor: feature.color }">
              <el-icon><component :is="feature.icon" /></el-icon>
            </div>
            <div class="feature-content">
              <h4 class="feature-title">{{ feature.title }}</h4>
              <p class="feature-description">{{ feature.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Picture, 
  Plus, 
  Download, 
  Share, 
  Loading,
  MagicStick,
  View,
  DataAnalysis,
  Trophy
} from '@element-plus/icons-vue'

// 响应式数据
const selectedFunction = ref(null)
const uploadedImage = ref('')
const segmentationResult = ref('')
const processing = ref(false)
const processingProgress = ref(0)
const processingStatus = ref('')
const confidenceScore = ref(0)
const processingTime = ref(0)

// 分割功能列表
const segmentationFunctions = [
  {
    id: 1,
    name: '器官分割',
    description: '自动识别并分割心脏、肺部、肝脏等器官',
    icon: 'MagicStick',
    color: '#1890ff'
  },
  {
    id: 2,
    name: '病灶检测',
    description: '智能检测肿瘤、结节等异常病灶区域',
    icon: 'View',
    color: '#52c41a'
  },
  {
    id: 3,
    name: '骨骼分析',
    description: '骨骼结构分割与骨密度分析',
    icon: 'DataAnalysis',
    color: '#722ed1'
  },
  {
    id: 4,
    name: '血管追踪',
    description: '血管网络提取与三维重建',
    icon: 'Trophy',
    color: '#fa8c16'
  }
]

// 技术特性
const techFeatures = [
  {
    title: '深度学习算法',
    description: '基于最新的U-Net、Mask R-CNN等深度学习模型',
    icon: 'DataAnalysis',
    color: '#1890ff'
  },
  {
    title: '高精度分割',
    description: '像素级精确分割，准确率达95%以上',
    icon: 'Trophy',
    color: '#52c41a'
  },
  {
    title: '多模态支持',
    description: '支持CT、MRI、X-Ray等多种医学影像格式',
    icon: 'Picture',
    color: '#722ed1'
  },
  {
    title: '实时处理',
    description: '优化算法实现秒级分割，提升诊断效率',
    icon: 'Loading',
    color: '#fa8c16'
  }
]

// 方法定义
const selectFunction = (func) => {
  selectedFunction.value = func
  ElMessage.success(`已选择：${func.name}`)
}

const handleBeforeUpload = (file) => {
  const isImage = file.type.indexOf('image') !== -1
  if (!isImage) {
    ElMessage.error('只能上传图片格式文件!')
    return false
  }
  const isLt10M = file.size / 1024 / 1024 < 10
  if (!isLt10M) {
    ElMessage.error('文件大小不能超过10MB!')
    return false
  }
  return true
}

const handleImageUpload = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    uploadedImage.value = e.target.result
    ElMessage.success('图像上传成功')
  }
  reader.readAsDataURL(file.raw)
}

const clearImage = () => {
  uploadedImage.value = ''
  segmentationResult.value = ''
  selectedFunction.value = null
}

const startSegmentation = () => {
  if (!selectedFunction.value) {
    ElMessage.warning('请先选择分割功能')
    return
  }
  
  processing.value = true
  processingProgress.value = 0
  processingStatus.value = '初始化分割引擎...'
  
  // 模拟分割处理过程
  const steps = [
    { progress: 20, status: '预处理图像...' },
    { progress: 40, status: '特征提取中...' },
    { progress: 60, status: '模型推理中...' },
    { progress: 80, status: '后处理优化...' },
    { progress: 100, status: '分割完成' }
  ]
  
  let currentStep = 0
  const interval = setInterval(() => {
    if (currentStep < steps.length) {
      processingProgress.value = steps[currentStep].progress
      processingStatus.value = steps[currentStep].status
      currentStep++
    } else {
      clearInterval(interval)
      // 模拟分割结果（这里使用原图作为示例）
      segmentationResult.value = uploadedImage.value
      confidenceScore.value = 92 + Math.floor(Math.random() * 6)
      processingTime.value = (2.5 + Math.random() * 2).toFixed(1)
      processing.value = false
      ElMessage.success('图像分割完成！')
    }
  }, 800)
}

const downloadResult = () => {
  ElMessage.success('结果下载开始')
}

const shareResult = () => {
  ElMessage.success('分享链接已复制到剪贴板')
}
</script>

<style scoped>
.image-segmentation {
  min-height: 100vh;
  background: #f5f7fa;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 页面头部 */
.segmentation-header {
  background: white;
  padding: 32px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #262626;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 2rem;
  color: #fa8c16;
}

.page-subtitle {
  color: #8c8c8c;
  font-size: 1rem;
  margin: 0;
}

.module-status {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(82, 196, 26, 0.1);
  padding: 8px 16px;
  border-radius: 20px;
  color: #52c41a;
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52c41a;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.model-badge {
  background: rgba(250, 140, 22, 0.1);
  color: #fa8c16;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(250, 140, 22, 0.2);
}

/* 功能导航 */
.function-navigation {
  padding: 32px 0;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.function-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.function-card:hover {
  border-color: #1890ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

.function-card.active {
  border-color: #1890ff;
  background: #e6f7ff;
}

.function-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  flex-shrink: 0;
}

.function-name {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 4px 0;
}

.function-description {
  font-size: 12px;
  color: #8c8c8c;
  margin: 0;
  line-height: 1.4;
}

/* 主工作区 */
.main-workspace {
  padding: 32px 0;
}

.workspace-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.upload-card, .result-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.upload-header, .result-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.upload-header h3, .result-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 4px 0;
}

.upload-header p {
  color: #8c8c8c;
  font-size: 14px;
  margin: 0;
}

.upload-area {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  padding: 48px 24px;
  text-align: center;
  transition: border-color 0.3s ease;
}

.upload-area:hover {
  border-color: #1890ff;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.upload-icon {
  font-size: 48px;
  color: #d9d9d9;
}

.upload-text p:first-child {
  font-size: 16px;
  color: #262626;
  margin: 0;
}

.upload-tip {
  color: #8c8c8c;
  font-size: 14px;
  margin: 4px 0 0 0;
}

.uploaded-image img, .result-display img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: center;
}

.empty-result, .processing-state {
  text-align: center;
  padding: 48px 24px;
}

.empty-icon, .processing-icon {
  font-size: 48px;
  color: #d9d9d9;
  margin-bottom: 16px;
}

.processing-icon.rotating {
  animation: rotate 2s linear infinite;
  color: #1890ff;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.progress-info {
  margin-top: 24px;
}

.progress-text {
  color: #8c8c8c;
  font-size: 14px;
  margin-top: 8px;
}

.result-metadata {
  margin-top: 16px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
}

.metadata-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.metadata-item:last-child {
  margin-bottom: 0;
}

.label {
  color: #8c8c8c;
  font-size: 14px;
}

.value {
  color: #262626;
  font-size: 14px;
  font-weight: 500;
}

/* 技术说明 */
.technology-section {
  padding: 48px 0;
  background: white;
}

.section-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #262626;
  margin-bottom: 32px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: #fafafa;
  border-radius: 12px;
}

.feature-item .feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  flex-shrink: 0;
}

.feature-title {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.feature-description {
  color: #8c8c8c;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .workspace-content {
    grid-template-columns: 1fr;
  }
  
  .nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .nav-grid {
    grid-template-columns: 1fr;
  }
  
  .function-card {
    flex-direction: column;
    text-align: center;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
}
</style> 